<template>
    <view class="box cadre-root" :style="fullStyle">
        <view class="content">
            <!-- 内容 begin -->
            <view class="content-item-1">
                <view class="info" @click="showCadreCard">
                    <view class="avatar">
                        <image :src="representativeInfo.representativePic" class="avatar"></image>
                    </view>
                    <view class="cadre-info">
                        <view class="name">
                            <view class="name-txt">
                                {{ representativeInfo.representativeName }}
                            </view>
                        </view>
                        <view class="tag-root">
                            <view :key="roleIndex" v-for="(roleItem,roleIndex) in representativeInfo.roles"
                                class="name-tag tag-item empty">
                                {{ roleItem }}
                            </view>
                        </view>
                        <view class="post">{{ representativeInfo.representativeDuty }}</view>
                    </view>
                    <view class="qrcode">
                        <image class="qrcode" :src="representativeInfo.representativeQr"></image>
                    </view>
                </view>
                <view class="other">
                    <view class="other-item contact-group"
                        @click="goSubPage(`${contactDetailPath}?liaisonId=${representativeInfo.id}`)">
                        <view class="vi">{{ representativeInfo.liaisonName }}</view>
                    </view>
                    <view class="other-item crowd-opinion">
                        <view class="title">已回复群众诉求：</view>
                        <view class="vi">{{ representativeInfo.replyCount }}条</view>
                    </view>
                    <view class="major">
                        <view class="title">专业领域：</view>
                        <view class="tag-item" :key="representativeMajorIndex"
                            v-for="(representativeMajorItem,representativeMajorIndex) in representativeInfo.representativeMajors">
                            {{ representativeMajorItem.majorName }}
                        </view>
                        <view class="vi" v-if="representativeInfo.representativeMajors&&representativeInfo.representativeMajors.length==0">暂无</view>
                    </view>
                </view>
            </view>
            <!-- 内容 end -->
            <view class="content-item-2">
                <view class="header">
                    <view class="title">反映民意诉求</view>
                </view>
                <view class="form">
                    <uni-forms :modelValue="ideaFrom" ref="ideaFromRefName" :rules="ideaRules" label-width="80">
                        <uni-forms-item label="诉求类别" name="opinionType" required>
                            <uni-data-select :placement="'top'" :localdata=helpCategory v-model="ideaFrom.opinionType"
                                placeholder="请选择诉求类别"></uni-data-select>
                        </uni-forms-item>

                        <uni-forms-item name="realName" required>
                            <uni-easyinput v-model="ideaFrom.realName" type="text" placeholder="请输入您的姓名或者网名" />
                        </uni-forms-item>
                        <uni-forms-item name="phone" required>
                            <uni-easyinput v-model="ideaFrom.phone" type="text" placeholder="请输入您的联系电话,方便接收诉求回复" />
                        </uni-forms-item>

                        <uni-forms-item name="opinionContent" required>
                            <uni-easyinput v-model="ideaFrom.opinionContent" type="textarea"
                                placeholder="请简要输入您的诉求内容" />
                        </uni-forms-item>


                    </uni-forms>
                </view>
            </view>
        </view>
        <!-- form-submit begin -->
        <view class="footer">
            <button @click="submitIdea" type="button">确认提交</button>
        </view>
        <!-- form-submit end -->
    </view>
</template>

<script>
    import {
        baseMixins
    } from "@/mixins/baseMixins";
    import {
        cadreCardPath,
        cadrePath,
        contactDetailPath,
        defaultAvatar,
        publicOpinionHistory,
        successPagePath
    } from "@/until/publicConfig";
    import {
        getDictByConde
    } from "@/until/dictUtil";
    import {
        requestGet,
        requestPost
    } from "@/until/means/request";
    import {
        GET_REPRESENTATIVE,
        SUBMIT_OPINION
    } from "@/api/representative";
    import {
        getQueryHeaders,
        loginCheck
    } from "@/until/userLogin";
    import {
        getFileAccessHttpUrl
    } from "@/until/fileUtil";

    export default {
        mixins: [baseMixins],
        data() {
            return {
                contactDetailPath,
                cadreCardPath,
                ideaFrom: {
                    opinionContent: "",
                    opinionType: "",
                    targetRepresentativeId: ""
                },
                helpCategory: [],
                ideaRules: {
                    opinionType: {
                        rules: [{
                            required: true,
                            errorMessage: '请选择求助类别',
                        }]
                    },
                    opinionContent: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入内容',
                        }]
                    },
                    realName: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入你的姓名',
                        }]
                    },
                    phone: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入你联系电话',
                        }]
                    },
                },
                representativeInfo: {},
            }
        },
        onShareAppMessage(res) {
        	return {
        		title:this.representativeInfo.liaisonName +" 驻站代表委员（"+this.representativeInfo.representativeName +"）向ta反映诉求",
        		path: '/pages/home/cadre?representativeId='+this.representativeInfo.id,
        		imageUrl: this.representativeInfo.representativePic,
        	}
        },
        // 分享到朋友圈
        onShareTimeline(res) {
        	return {
        		title:this.representativeInfo.liaisonName +" 驻站代表委员（"+this.representativeInfo.representativeName +"）向ta反映诉求",
        		path: '/pages/home/cadre?representativeId='+this.representativeInfo.id,
        		imageUrl: this.representativeInfo.representativePic,
        	}
        },
        onLoad(obj) {
             console.log(obj);
                
             if(obj.q){
                 console.log(obj.q);
                 console.log(111111111111);
                 const url = decodeURIComponent(obj.q) // 获取到二维码原始链接内容
                
                 let params = this.getParams(url);
                 console.log(params);
                 this.ideaFrom.targetRepresentativeId = params.representativeId
             }else{
                 this.ideaFrom.targetRepresentativeId = obj.representativeId
             }
            
            this.setHelpCategory()
            this.getRepresentative()
        },
        methods: {
            showCadreCard() {
                this.goSubPage(
                    `${cadreCardPath}?representativeInfo=${encodeURIComponent(JSON.stringify(this.representativeInfo))}`
                    )
            },
            getRepresentative() {
                requestGet({
                    url: GET_REPRESENTATIVE,
                    data: {
                        representativeId: this.ideaFrom.targetRepresentativeId
                    }
                }).then(res => {
                    if (res == null) return;
                    res.representativePic = res?.representativePic != null && res?.representativePic !== '' ?
                        getFileAccessHttpUrl(res.representativePic) : defaultAvatar
                    res.representativeQr = res?.representativeQr != null && res?.representativeQr !== '' ?
                        getFileAccessHttpUrl(res.representativeQr) : ''
                    this.representativeInfo = res
                })
            },
            async setHelpCategory() {
                this.helpCategory = await getDictByConde('masses_opinion_type')
            },
            submitIdea() {
                let owner = this
                this.$refs.ideaFromRefName.validate().then(async () => {
                    if (!await loginCheck()) {
                        return
                    }
                    requestPost({
                        url: SUBMIT_OPINION, //仅为示例，并非真实接口地址。
                        data: owner.ideaFrom,
                        header: getQueryHeaders(),
                    }).then(() => {
                        uni.redirectTo({
                            url: `${successPagePath}?representativeId=${owner.ideaFrom.targetRepresentativeId}&liaisonId=${owner.representativeInfo.liaisonId}&backPath=${cadrePath}&historyPath=${publicOpinionHistory}`
                        })
                    });
                })
            },
        }
    }
</script>

<style lang='scss' scoped>
    .cadre-root {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

        .content {
            color: #222222;
            width: 100%;
            height: calc(100% - 120rpx);
            position: relative;
            z-index: 99;

            .content-item-1 {
                background: #FFF;
                padding: 20rpx;
                margin: 30rpx;
                border-radius: $border-radius-lg;
                width: calc(100% - 60rpx);

                .info {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-bottom: 20rpx;
                    border-bottom: 2rpx solid #C7C7C7;
                    width: 100%;

                    .avatar {
                        width: 160rpx;
                        height: 200rpx;
                        margin-right: 30rpx;
                        border-radius: 10rpx;

                        image {
                            border-radius: 10rpx;
                        }
                    }

                    .cadre-info {
                        display: flex;
                        flex-direction: column;
                        margin-right: auto;
                        width: calc(100% - 310rpx);

                        view {
                            padding: 4rpx 0;
                        }

                        .name {
                            display: flex;
                            flex-direction: row;
                            width: 100%;
                            flex-wrap: wrap;

                            .name-txt {
                                font-family: PingFang SC, PingFang SC;
                                font-weight: 600;
                                font-size: 34rpx;
                                color: #222222;
                                line-height: 35rpx;
                                font-style: normal;
                                text-transform: none;
                                margin-right: 10rpx;
                            }
                        }

                        .tag-root {
                            display: flex;
                            flex-direction: row;
                            width: 100%;
                            flex-wrap: wrap;
                        }

                        .post {
                            font-size: 26rpx;
                            color: #ABABAB;
                        }
                    }

                    .qrcode {
                        margin-left: 10rpx;
                        width: 134rpx;
                        height: 134rpx;
                        border-radius: 10rpx;
                    }
                }

                .other {
                    display: flex;
                    flex-direction: column;
                    padding-top: 20rpx;

                    .title {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 30rpx;
                        color: #222222;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                    }

                    .vi {
                        font-size: 26rpx;
                        color: #B1B1B1;
                    }

                    .other-item {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 10rpx 0;
                    }

                    .major {
                        padding: 10rpx 0;

                        .title {
                            margin-right: 20rpx;
                        }

                        display: flex;
                        align-items: center;
                        font-size: 30rpx;
                        flex-wrap: wrap;
                    }
                }
            }

            .content-item-2 {
                background: #FFF;
                padding: 20rpx;
                margin: 30rpx;
                border-radius: $border-radius-lg;

                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20rpx;

                    .title {
                        font-size: 30rpx;
                        font-weight: 500;
                    }
                }
            }

            .tag-item {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #FEDADA;
                color: #BD0E0E;
                border-radius: $border-radius-lg;
                font-size: 22rpx;
                padding: 10rpx 12rpx !important;
                margin-right: 10rpx;
                margin-bottom: 10rpx;

                &.empty {
                    background: transparent;
                    color: #ABABAB;
                    border: 1rpx solid #ABABAB;
                }
            }

            .form {
                width: 100%;
                padding: 30rpx;
                background-color: $bg-color-white;
                border-radius: $border-radius-lg;

                .uni-forms-item {
                    margin-bottom: 20rpx !important;
                }

                .row {
                    display: flex;
                    // justify-content: space-between;
                    flex-wrap: wrap;
                    padding: 20rpx 0;

                    .grid {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        flex: none !important;
                        // margin: 20rpx 0;
                        width: 33%;

                        image {
                            width: 190rpx;
                            height: 190rpx;
                            border-radius: 20rpx;
                        }
                    }

                    /deep/ .uni-file-picker__container {
                        margin: 0 !important;
                    }

                    /deep/ .file-picker__box-content {
                        border: none !important;
                    }

                    .default {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding: 36rpx;
                        // margin: 20rpx;
                        border: 1rpx solid #c7c7c7;
                        border-radius: 20rpx;

                        image {
                            width: 50rpx !important;
                            height: 50rpx !important;
                        }

                        view {
                            padding-top: 20rpx;
                        }
                    }
                }
            }
        }

        .footer {
            height: 120rpx;
            padding: 10rpx 50rpx;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #FFFFFF;
            z-index: 10;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

            button {
                width: 100%;
                height: 80%;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50rpx;
                color: #FFFFFF !important;
                background: linear-gradient(to bottom, #FA4D37, #C01600) !important;
            }
        }

    }

    /deep/ .scroll-view {
        height: calc(100% - 250rpx) !important;
    }
</style>